<!DOCTYPE html>
<html lang="en">
<head xmlns:th="http://www.thymeleaf.org">
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="/css/bootstrap.css">
  <script src="/js/jquery-3.6.1.min.js"></script>
  <link rel="stylesheet" href="/plugins/bootstraptable/bootstrap-table.min.css">



</head>
<body>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">成绩修改</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <!--模态框内容-->
        <form id="formTeacher">
          <!--          序号，课号，课名，学分，课时，学号，姓名，分数-->
          <div class="mb-3">
            <label class="form-label">课号:</label>
            <label id="cno" class="form-label"></label>
          </div>
          <div class="mb-3">
            <label class="form-label">课名:</label>
            <label id="cname" class="form-label"></label>
          </div>
          <div class="mb-3">
            <label class="form-label">学号:</label>
            <label id="sno" class="form-label"></label>
          </div>
          <div class="mb-3">
            <label class="form-label">姓名：</label>
            <label id="sname" class="form-label"></label>
          </div>
          <div class="mb-3">
            <label for="score" class="form-label">成绩</label>
            <input type="text" class="form-control" id="score" name="score" placeholder="Student score">
          </div>
        </form>
      </div>
      <div class="modal-footer">

        <button type="button" class="btn btn-primary" onclick="saveScore();">提交更改</button>
      </div>
    </div>
  </div>
</div>

<div class = "container-fluid">
  <table class="table table-striped" id = "stuTable">
  </table>

  <form id="searchForm">
    <div class="input-group mb-3">
      <select class="form-select" id="searchOption" name="searchOption">
        <option value = "10">以课号查询</option>
        <option value = "11">以课名查询</option>
        <option value = "12">以学号查询</option>
        <option value = "13">以学生姓名查询</option>
      </select>
      <input name="name" id="name" type="text" placeholder="请输入" class="w-50 form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
      <button type="button" class="btn btn-outline-secondary" onclick="searchStudent();"> 查询 </button>
    </div>
  </form>

  <table class="table table-dark table-striped" id="studentTb2">

  </table>

</div>



<script src="/js/bootstrap.min.js"></script>

<script src="/plugins/bootstraptable/bootstrap-table.min.js"></script>
<script src="/plugins/bootstraptable/locale/bootstrap-table-zh-CN.min.js"></script>

<script type="text/javascript">
  function search(){

    $('#stuTable').bootstrapTable("destroy");
    loadTable();
  }

  function searchStudent(){

    $('#studentTb2').bootstrapTable("destroy");

    var searchOption = $("#searchOption").val();

    var name = $("#name").val();

    var searchMatching = $("#searchMatching").val();

    $("#studentTb2").bootstrapTable({
      url: '/teacher/search',
      striped: true, //隔行变色
      pagination: true, //底部显示分页条
      singleSelect: false, //禁止多选
      pageSize:4, //每一页有几条数据
      pageNumber:1, //设置了分页，首页页码
      sidePagination: "server", //设置在何处分页，可选值为client或者server
      queryParams: function (params){
        var paraObj = {
          size: params.limit,
          page:params.offset/params.limit,
          sort:"id",
          direct:"asc",
          pageNum:this.pageNumber,
          name:name+"!"+searchOption+"!"+searchMatching,
        };
        return paraObj;
      },
      columns: [{
          field: 'id',
          title: '序号',
          width: 50
      }, {
          field: 'cno',
          title: '课号',
          width: 130
      }, {
          field: 'cname',
          title: '课名',
          width: 100
      }, {
          field: 'hour',
          title: '课时',
          width: 30
      }, {
          field: 'credit',
          title: '学分',
          width: 10,
      }, {
          field: 'sno',
          title: '学号',
          width: 50,
      }, {
          field: 'sname',
          title: '学生姓名',
          width: 50,
      }, {
          field: 'score',
          title: '分数',
          width: 50,
          formatter:edit
      }],
    })
  }


  function loadTable(){

    $('#stuTable').bootstrapTable({
      url: '/teacher/displayList',
      striped: true, //隔行变色
      pagination: true, //底部显示分页条
      singleSelect: false, //禁止多选
      pageSize:5, //每一页有几条数据
      pageNumber:1, //设置了分页，首页页码
      sidePagination: "server", //设置在何处分页，可选值为client或者server
      queryParams: function (params){
        var paraObj = {
          size: params.limit,
          page:params.offset/params.limit,
          sort:"id",
          direct:"desc",
          pageNum:this.pageNumber,
        };
        return paraObj;
      },
      columns: [{
        field: 'id',
        title: '序号',
        width: 50
      }, {
        field: 'cno',
        title: '课号',
        width: 130
      }, {
        field: 'cname',
        title: '课名',
        width: 100
      }, {
        field: 'hour',
        title: '课时',
        width: 30
      }, {
        field: 'credit',
        title: '学分',
        width: 10,
      }, {
        field: 'sno',
        title: '学号',
        width: 50,
      }, {
        field: 'sname',
        title: '学生姓名',
        width: 50,
      }, {
        field: 'score',
        title: '分数',
        width: 50,
        formatter:edit
      }],
    })

  }
  function edit(value,row,index){
    let snoAndCno = row.sno+"!"+row.cno
    if (value == null)
      return "<a href='#' data-bs-target='#exampleModal' data-bs-toggle='modal' onclick='teacherEdit("+"\""+snoAndCno+"\""+");'>暂无</a>";
    else {
      return "<a href='#' data-bs-target='#exampleModal' data-bs-toggle='modal' onclick='teacherEdit("+"\""+snoAndCno+"\""+");'>"+value+"</a>";
    }
  }

  function saveScore(){
    var data = $("#sno").html()+"!"+$("#cno").html()+"!"+$("#score").val();

    $.ajax({
        url:"/teacher/saveScore/"+data,
    }).done(function (){
      $('#exampleModal').modal('hide');
        $('#stuTable').bootstrapTable("destroy");
        $('#studentTb2').bootstrapTable("destroy");
        loadTable();
        searchStudent();
    })
  }

  function teacherEdit(snoAndCno){
    $("#exampleModal").modal('show')
    $.ajax({
      url:"/teacher/teacherEdit/"+snoAndCno,
    }).done(function (rs){
      $("#cno").html(rs.cno);
      $("#cname").html(rs.cname);
      $("#sno").html(rs.sno);
      $("#sname").html(rs.sname);
      if (rs.score !== null){
          $("#score").val(rs.score);
      }
      else {
          $("#score").val("暂无")
      }
    })
  }

  function login_jump(){
    $.ajax({
      url:'/teacher/displayList'
    }).done(function(rs){
      if(rs==null){
        window.location.href="/login";
      }
    })
  }
  $(function (){
    login_jump();
    loadTable();
  });

</script>



</body>
</html>